import React from "react";
import { Provider, useSelector, useDispatch } from "react-redux";
import store from "./storeMultiple";

function Counter() {
  const value = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>计数器模块</h2>
      <p>当前值: {value}</p>
      <button onClick={() => dispatch({ type: "counter/increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "counter/decrement" })}>-1</button>
    </div>
  );
}

function User() {
  const name = useSelector((state) => state.user.name);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>用户模块</h2>
      <p>用户名: {name}</p>
      <button onClick={() => dispatch({ type: "user/setName", payload: "Tom" })}>
        改名为 Tom
      </button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <div>
        <h1>Redux 多模块示例（combineReducers）</h1>
        <Counter />
        <User />
      </div>
    </Provider>
  );
}

export default App;
